<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>

</head>

<body>
	<div class="demo-tip icon-tip">
		<h1>easyUI tree</h1>
		<ul id="easyui-tree">
			
		</ul>
		<input type="button" id="used" value="按钮" onclick="bs()"/> 
	</div>
	<div id="mm" class="easyui-menu" style="width:120px;">
	<div onclick="append()" data-options="iconCls:'icon-add'">追加</div>
	<div onclick="remove()" data-options="iconCls:'icon-remove'">移除</div>
</div>
	
</body>

</html>

<script type="text/javascript">
$(function() {
	$.fn.aabbcc=function(){//自定义方法或属性 $.fn.方法名/属性名=function(){}
		alert($(this).attr("id"));
	}
    $("#easyui-tree").tree({
        checkbox : true,
        url : 'getTree',
        onBeforeLoad : function(node, param) {
            alert('开始请求数据');
            //return false;拒绝请求树
        },
        onLoadSuccess : function(node, data) {
            alert('数据请求成功');
        },
        onLoadError : function() {
            alert('加载失败');
        },
        onSelect:function(node){
        	var getSelected=$('#easyui-tree').tree('getSelected');
        },
        onCheck:function(node, checked){
        	var getSelected=$('#easyui-tree').tree('getSelected');
        },
        onClick : function(node) {
        	/* alert(node.id);
        	alert(node.text);
        	alert(node.checked);
        	alert(node.state);
        	alert(node.attributes);
        	alert(node.target); */
        	
        	console.log( 'getchecked：'+$('#easyui-tree').tree('getChecked'));
        	
        	var getChecked=$('#easyui-tree').tree('getChecked');
        	
        	console.log( 'getSelected：'+$('#easyui-tree').tree('getSelected'));
        	
        	
        		// get checked nodes
        	/* var nodes = $('#easyui-tree').tree('getChecked', 'unchecked');	// 获取未选择节点
        	var nodes = $('#easyui-tree').tree('getChecked', 'indeterminate');	// 获取不确定的节点 */

            //获取指定的节点对象
             var getNode=$('#easyui-tree').tree('getNode',node.target);;
            //alert($('#easyui-tree').tree('getNode',node.target).id)
            //获取指定的节点数据，包括子节点
             console.log($('#easyui-tree').tree('getData',node.target))

            //获取根节点，返回节点对象
            console.log($('#easyui-tree').tree('getRoot',node.target))
			
            console.log($('#easyui-tree').tree('getParent',node.target))
            //获取子节点
             console.log($('#easyui-tree').tree('getChildren',node.target))
            //指定节点进行添加操作
            /*   if( $('#easyui-tree').tree('getChildren',node.target).length==0){
                $('#easyui-tree').tree('append',{
                 parent:node.target,
                 data:[{text:'呵呵'}]
              })
             }  */

        },
        //在右键点击节点的时候触发。
        onContextMenu: function(e, node){
    		e.preventDefault();
    		// 查找节点
    		$('#tt').tree('select', node.target);
    		// 显示快捷菜单
    		$('#mm').menu('show', {
    			left: e.pageX,
    			top: e.pageY
    		});
    	},

        onlyLeafCheck : false,
        //随意拖动
        dnd : true,
    });

});

function bs() {
    //加载tree数据
     $('#easyui-tree').tree('loadData',[{text:'number11'}])

    //重新加载树的数据
    $("#easyui-tree").tree('reload')

    //获取所有勾选选中的节点
    console.log($('#easyui-tree').tree('getChecked'))

    //获取所有选中的节点
    console.log($('#easyui-tree').tree('getSelected'))

    //根据id属性值找到该节点
    console.log($('#easyui-tree').tree('find',12))

    //选中一个节点
     var node= $('#easyui-tree').tree('find',12);
    $('#easyui-tree').tree('select',node.target);  

    //选中
    var node= $('#easyui-tree').tree('find',12);
    $('#easyui-tree').tree('check',node.target); 

    //指定节点不选中
     var node= $('#easyui-tree').tree('find',12);
    $('#easyui-tree').tree('uncheck',node.target); 
    
    //指定节点折叠
     var node= $('#easyui-tree').tree('find',1);
     $('#easyui-tree').tree('collapse',node.target);  

    //展开所有节点
    $('#easyui-tree').tree('expandAll')
}
</script>